<template>
  <div :id="props.id" class="ylfw">
    <div class="ylfwbox fora">
      <p>{{item.title}}</p>
      <span>{{ item.data }}</span>
      <div class="forb"></div>
    </div>
  </div>
</template>

<script setup lang="ts" name="HzItemDescribeCard">

import {loadEchartsData} from "/@api/hz-bigscreen-api";

const props = defineProps({
  id: {
    type: String,
    default: 'item-describe-card'
  },
  apiPath: { // api路径
    type: String,
    default: ''
  },
  chartsType: { // 图表类型
    type: String,
    default: 'itemDescribeCard'
  },
  methodType: {
    type: String, // 请求方式
    default: 'get'
  }
});
const item = ref({
  title: '数据描述卡片组件',
  data: '13113212.5'
})

// 刷新图表方式，该方法需要提供给外部调用
// eslint-disable-next-line no-unused-vars
const refreshCharts = (data:any) => {
  item.value.title = data.title
  item.value.data = data.data
};
// 刷新图表  根据apiPath，method，type query获取数据
const refreshChartsByApi = async (query : any) => {
  // 如果query中没有封装type则给query添加type属性
  if (!query.hasOwnProperty('chart_type')) {
    query.chart_type = props.chartsType
  }
  const s = await loadEchartsData(props.apiPath, props.methodType, query)
  refreshCharts(s.data)
}
function resizeCharts() {

}


// eslint-disable-next-line no-undef
defineExpose({
  refreshCharts,
  resizeCharts,
  refreshChartsByApi
});
</script>

<style scoped>
@import "/@assets/font/electronic.css";
.ylfw {
  /*margin-left: 5px;*/
  /*margin-right: 5px;*/
  width: 100%;
  height: 100%;
}
.ylfwbox {
  border: 1px solid #1070aa;
  /*padding: 10px 15px;*/
  position: relative;
  /*margin: 5px;*/
  background-color: rgba(13, 20, 38, 0.5);
  /*width: 260px;*/
  /*height: 100px;*/
  width: 100%;
  height: 100%;
}

.fora {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.forb {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
}

.fora:before, .fora:after, .forb:before, .forb:after {
  position: absolute;
  content: "";
  width: 2px;
  height: 2px;
  border: 1px solid #00deff;
  opacity: .8;
  box-shadow: 0 0 5px #00deff;
}

.fora:before, .forb:before {
  left: -2px;
  top: -2px;
}

.fora:after, .forb:after {
  right: -2px;
  top: -2px;
}


.ylfwbox p {
  font-size: 20px;
  margin-left: -5px;
  margin-bottom: -5px;
  margin-right: -5px;
}

.ylfwbox span {
  font-size: 50px;
  color: #00deff;
  text-shadow: 0 0 5px #00deff;
  font-family: electronicFont;
  margin: -5px;
}


</style>